<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击a标签弹出相应的序号</title>
    <style>
        a{
            text-decoration: none;
            border: 1px solid #ccc;
        }
        .quan{
            width: 300px;
            text-align: center;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="quan">
        <a href="javascript:;">0</a>
        <a href="javascript:;">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">5</a>
        <a href="javascript:;">6</a>
        <a href="javascript:;">7</a>
        <a href="javascript:;">8</a>
        <a href="javascript:;">9</a>
    </div>
    <!-- 方法三 -->
    <!-- 引入jquery -->
    <script src="./js/jquery.min.js"></script>
    <script>
        // 获取元素
        let a=document.querySelectorAll('a')
        // 1、方法一
        // 使用let循环
        // for(let i=0;i<a.length;i++){
        //     a[i].addEventListener('click',function(){
        //         console.log(i)
        //     })
        // }
        // 2、方法二
        // 使用var 没有块级作用域，点击的时候都是输出10 用自定义属性，直接得到自定义属性的序号
        // for(var i=0;i<a.length;i++){
        //     a[i].setAttribute('index',i)//这里也可以不写，直接在html里面加
        //     a[i].addEventListener('click',function(){
        //         // console.log(i)//输出的都是10
        //         console.log(this.getAttribute('index'))
        //     })
        // }
        // 3、方法三
        // 用jquery
        // $(a).click(function(){
        //     console.log($(this).index())
        // })
        // 4、方法四
        // 使用闭包，闭包会浪费内存喔，能不使用还是尽量避免
        for(var i=0;i<a.length;i++){
            (function(j){//这是一个立即执行函数
                a[j].addEventListener('click',function(){
                    console.log(j)
                })
            })(i)//传递参数i，在上面用j接收
        }
    </script>
</body>
</html>